<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../statics/css/iview.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="../statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="../statics/lib/iview.min.js"></script>
    <script type="text/javascript" src="../statics/lib/jquery.min.js"></script>
</head>
<style>
    .iForm input,radiogroup,select{
        width: 80%;
    }
    .ivu-form-item{
        margin-bottom: 15px;
        vertical-align: top;
        zoom: 1;
    }
    .ivu-page {
        float: right;
        margin-top: 30px;

    }
</style>
<body>
<div id="menu">
    <div>
        <i-button type="info" @click="showList = true">新增</i-button>
        <i-button type="info" @click="updateMenu">修改</i-button>
        <i-button type="info" @click="deleteMenu">删除</i-button>
        <i-table border ref="selection" :columns="columns4" :data="data1" @on-select="onSelect" @on-select-cancel="onSelectCancel"></i-table>
        <template>
            <Page :total="totalElements" :page-size="pageSize" show-elevator @on-change="changePage"></Page>
        </template>
    </div>


    <Modal v-model="showList" style="width: 80%;" :styles="{top: '20px'}">
        <p slot="header" style="color:#f60;text-align:center">
            <!--<Icon type="information-circled"></Icon>-->
            <span>新增菜单</span>
        </p>
        <i-form :model="formItem" :label-width="120" class="iForm">
            <form-item label="类型">
                <Radio-Group v-model="formItem.resourceType">
                    <Radio label="folder">目录</Radio>
                    <Radio label="menu">菜单</Radio>
                    <Radio label="button">按钮</Radio>
                </Radio-Group>
            </form-item>
            <form-item label="菜单名称">
                <i-input v-model="formItem.title"  clearable  placeholder="菜单名称"></i-input>
            </form-item>
            <form-item label="上级菜单">
                <i-input v-model="formItem.parentName"  readonly="fasle" placeholder="菜单名称"  @on-focus="showTreeList = true" ></i-input>
            </form-item>
            <div v-if="formItem.resourceType == 'menu'">
                <form-item label="菜单Url" >
                    <i-input v-model="formItem.url" clearable  placeholder="菜单Url" ></i-input>
                </form-item>
                <form-item label="授权码">
                    <i-input v-model="formItem.permission" clearable  placeholder="授权码"></i-input>
                </form-item>
            </div>

            <form-item label="图标">
                <i-input v-model="formItem.type" clearable  placeholder="图标" ></i-input>
            </form-item>
            <form-item label="描述">
                <i-input v-model="formItem.description" clearable  type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="描述" ></i-input>
            </form-item>
        </i-form>
        <div slot="footer" style="text-align: center">
            <i-Button type="info" shape="circle" size="large"   @click="showList = false">Back</i-Button>
            <i-Button type="info" shape="circle" size="large"   @click="saveOrUpdate">Save</i-Button>
        </div>
    </Modal>

    <Modal v-model="showTreeList" width="300">
        <p slot="header" style="color:#f60;text-align:center">
            <span>选择菜单</span>
        </p>
        <Tree :data="data2" :load-data="loadData" ref="tree"></Tree>
        <div slot="footer" style="text-align: center">
            <i-Button shape="circle" type="info" size="small"   @click="showTreeList = false;">Cancle</i-Button>
            <i-Button shape="circle " type="info" size="small" @click="menuTree">Confirm</i-Button>
        </div>
    </Modal>


</div>
<script src="../statics/js/menu.js"> </script>


</body>
</html>